<template>
  <div class="box">
    <mt-header id="contentHeaderId" :title="Conobj.title">
      <div slot="left">
        <mt-button @click = "tobefore" icon="back"></mt-button>
      </div>
    </mt-header>
    <div class="contentDetail">
      <h2> {{ Conobj.title }} </h2>
      <p> {{ Conobj.cpContent }}</p>
    </div>
    <footer class="footer footerContent">
      <mt-button @click = "gobeforepage" size="normal">上一章</mt-button>
      <mt-button @click = "golastpage" size="normal">下一章</mt-button>
    </footer>
  </div>
</template>
<script>
import Vue from 'vue'
import { Header, Indicator } from 'mint-ui'
Vue.use(Header)
export default{
  data () {
    return {
      Conobj: {},
      contentchapters: [],
      lastchaper: {},
      beforechaper: {}
    }
  },
  mounted () {
    Indicator.open('加载中...')
    this.contentchapters = JSON.parse(localStorage.getItem('chapters'))
    console.log(this.contentchapters)
    console.log(this.$route.query.link)
    console.log(this.$route.query.index)
    this.$route.query.link = encodeURIComponent(this.$route.query.link)
    fetch(`/xiaoliang/chapters/${this.$route.query.link}`)
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        this.Conobj = data.chapter
        Indicator.close()
      })
  },
  methods: {
    golastpage () {
      console.log('下一章')
      if (parseInt(this.$route.query.index) >= 0 && parseInt(this.$route.query.index) < this.contentchapters.length) {
        console.log(parseInt(this.$route.query.index) + 1)
        console.log(this.contentchapters[parseInt(this.$route.query.index) + 1])
        this.lastchaper = this.contentchapters[parseInt(this.$route.query.index) + 1]
        /* eslint-disable no-new */
        new Promise((resolve, reject) => {
          this.$router.push(`/content?link=${this.lastchaper.link}&index=${parseInt(this.$route.query.index) + 1}`)
          resolve()
        }).then(() => {
          location.reload()
        })
      } else {
        alert('已经是最后一页')
      }
    },
    gobeforepage () {
      console.log('上一章')
      if (parseInt(this.$route.query.index) > 0 && parseInt(this.$route.query.index) < this.contentchapters.length) {
        console.log(parseInt(this.$route.query.index) - 1)
        console.log(this.contentchapters[parseInt(this.$route.query.index) - 1])
        this.lastchaper = this.contentchapters[parseInt(this.$route.query.index) - 1]
        /* eslint-disable no-new */
        new Promise((resolve, reject) => {
          this.$router.push(`/content?link=${this.lastchaper.link}&index=${parseInt(this.$route.query.index) - 1}`)
          resolve()
        }).then(() => {
          location.reload()
        })
      } else {
        alert('已经是第一章')
      }
    },
    tobefore () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
#contentHeaderId{
  background-color:rgba(255,255,255,0.5);
  color: #f36a86;
}
.contentDetail{
  @include overflow()
  @include background-color(#f4dae3);
  @include rect(100%, 100%)
  padding:0.1rem;
  h2{
    font-size: 0.3rem;
    font-weight: 100;
    color: #693446;
  }
  p{
    font-size: 0.2rem;
    color: #693446;
  }
}
.footerContent{
  @include rect(100%, 0.5rem);
  @include background-color(#fee7ed);
  button:nth-of-type(1){
    @include rect(49%, 0.5rem);
    border: none;
    background:#fff;
    color: #f36a86;
  }
  button:nth-of-type(2){
    @include rect(49.5%, 0.5rem);
    border: none;
    background:#fff;
    color: #f36a86;
  }
}
</style>
